<template>
  <section class="aos-init aos-animate" data-aos="fade-up" v-if="resume">
    <div class="container">
      <div class="row">
        <div
          class="col-md-6 mb-md-0 p-md-4"
          data-aos="fade-right"
          aos-easing="ease-in-sine"
          data-aos-duration="1000"
        >
          <img :src="imgUrl(resume.contentImg)" class="img-fluid" alt="" />
        </div>
        <div
          class="col-md-6 p-4 ps-md-0"
          data-aos="fade-left"
          aos-easing="ease-in-sine"
          data-aos-duration="1000"
        >
          {{
            void (description = jsonStringTojsObject(resume.contentDescription))
          }}
          <h5 class="mt-0 text-center">
            {{ description.title }}
          </h5>
          <h5 class="mt-0 text-center">
            {{ description.englishTitle }}
          </h5>
          <div class="description" v-html="resume.contentDetails"></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getArticleById, imgUrl, jsonStringTojsObject } from "@/api/index.js";

//1505118591844966402
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      resume: null,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      getArticleById("1505118591844966402").then((res) => {
        data.resume = res.data;
      });
    });
    //
    const methods = { imgUrl, jsonStringTojsObject };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped></style>
